<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>::Portal Cognitive::</title>
        <link href="resources/styles/nivo-slider.css" rel="stylesheet"/>
        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .navbar-search {
                padding-left: 35px;
            }
            .slider-header {
                position: relative;
                top: -20px;
            }
            #slider {
                height: 300px;
            }
            .navbar {
                margin-bottom: 0;
            }
        </style>
    </h:head>
    <h:body>
        <ui:composition template="template/layout.xhtml">
            <ui:define name="content">
                <div class="slider-header">
                    <div class="slider-wrapper theme-dark">
                        <div id="slider" class="nivoSlider">
                            <img src="resources/images/tron.jpg" data-thumb="resources/images/tron.jpg" alt="" />
                            <img src="resources/images/tbar.png" data-thumb="resources/images/tbar.png" alt=""  />
                        </div>
                    </div>
                </div>

                <div class="container">
                    <div class="row">
                        <div class="span4">
                            <h2>Noticia</h2>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn" href="#">Leia mais &raquo;</a></p>
                        </div>
                        <div class="span4">
                            <h2>Noticia</h2>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn" href="#">Leia mais &raquo;</a></p>
                        </div>
                        <div class="span4">
                            <h2>Noticia</h2>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn" href="#">Leia mais &raquo;</a></p>
                        </div>
                    </div>

                </div> <!-- /container -->
            </ui:define>

        </ui:composition>
    </h:body>

    <script type="text/javascript" src="resources/js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
        
        $(document).ready(function() {

                     
            $('#slider').nivoSlider({
                effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
                slices: 15, // For slice animations
                boxCols: 8, // For box animations
                boxRows: 4, // For box animations
                animSpeed: 500, // Slide transition speed
                pauseTime: 3000, // How long each slide will show
                startSlide: 0, // Set starting Slide (0 index)
                directionNav: true, // Next  Prev navigation
                controlNav: true, // 1,2,3... navigation
                controlNavThumbs: false, // Use thumbnails for Control Nav
                pauseOnHover: true, // Stop animation while hovering
                manualAdvance: false, // Force manual transitions
                prevText: 'Prev', // Prev directionNav text
                nextText: 'Next', // Next directionNav text
                randomStart: false, // Start on a random slide
                beforeChange: function(){}, // Triggers before a slide transition
                afterChange: function(){}, // Triggers after a slide transition
                slideshowEnd: function(){}, // Triggers after all slides have been shown
                lastSlide: function(){}, // Triggers when last slide is shown
                afterLoad: function(){} // Triggers when slider has loaded
            });
        });
    </script>

</html>

